<template>
  <el-dialog
      title="意见反馈"
      v-model="dialogVisible"
      width="400px"
      :before-close="handleClose"
  >
    <!-- 反馈内容输入框（多行、字数限制） -->
    <el-input
        type="textarea"
        v-model="feedbackContent"
        :rows="4"
        placeholder="请输入您的宝贵意见或建议（10-200字）"
        maxlength="200"
        show-word-limit
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitFeedback">提交反馈</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import http from "@/request/http.js";

const dialogVisible = ref(false) // 控制弹框显示/隐藏
const feedbackContent = ref('') // 反馈内容

// 提交反馈逻辑
const submitFeedback = async () => {
  const content = feedbackContent.value.trim()
  // 前端校验
  if (!content) {
    ElMessage.warning('请输入反馈内容～');
    return;
  }
  if (content.length < 10) {
    ElMessage.warning('反馈内容不能少于10字哦～');
    return;
  }

  try {
    // 发送POST请求到后端接口（注意：后端用@RequestParam，需将content作为“查询参数”传递）
    const response = await http.post(
        '/api/feedback/addFeedback', // 接口地址
        {}, // POST请求体（后端不需要请求体，传空对象）
        {
          params: { content } // 查询参数：?content=xxx
        }
    );

    // 处理后端响应（假设后端返回格式：{ code: 0, message: "成功", data: {} }）
    if (response.code === 0) {
      ElMessage.success('反馈提交成功，感谢您的建议！');
      dialogVisible.value = false; // 关闭弹框
      feedbackContent.value = ''; // 清空输入
    } else {
      ElMessage.error(response.data.message || '提交失败');
    }
  } catch (error) {
    console.error('反馈提交异常：', error);
    ElMessage.error('网络异常，提交失败，请稍后再试');
  }
}

// 弹框关闭回调
const handleClose = () => {
  dialogVisible.value = false;
}

// 暴露「显示弹框」的方法，供父组件调用
defineExpose({
  showModal: () => {
    dialogVisible.value = true;
  }
})
</script>

<style scoped>
</style>